<template>
  <div class="register_wrap">
     <header>
       <p><img src="../assets/img/left@2x.png" @click = "back"></p>
       <p>注册</p>
       <p></p>
     </header>
      <div class="forms">
        <form>
          <div class="etc_card"><input type="text" placeholder="请输入ETC卡号"></div>
          <div class="id_card"><input type="text" placeholder="请输入身份证号"></div>
          <div class="car_card"><input type="text" placeholder="请输入车牌号"></div>
          <div class="nexter"><input type="button" value="下一步"></div>
        </form>
      </div>
  </div>
</template>


<script>

import axios from 'axios';

export default {
  name: 'usual_dress',
  data () {
    return {
      msg: 'ewt'
    }
  },
  methods: {
    back: function(){
      this.$router.back()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.register_wrap{
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  .forms {
    .padding-left(24);
    .padding-right(24);
    div {
      .line-height(88);
      .border(1,solid,#ccc);
      .margin-top(24);
      .margin-bottom(24);
      input {
        border: none;
        .padding-left(50);
      }
    }
    .nexter {
        input {
          /* display: block; */
          width: 100%;
          /* height: 100%; */
          .line-height(88);
        }
      }
  }
}
</style>
